@import "../../../wap_common/static/libs/base/root.less";

.page-demand{
  background: @yellow1;;
  .block-profit{
    color:#fff;
    background: @red url(./image/bg.png) no-repeat center bottom;
    background-size:90% 60px;
    text-align: center;
    .line1{
      height: 40px;
      line-height: 40px;
      font-size:16px;
    }
    .line2{
      width: 150px;
      height: 45px;
      line-height: 45px;
      margin:0 auto;
      color:@red;
      background: #fff;
      .border-radius(5px);
      margin-bottom:5px;
      font-size:@size4;
    }
    .line3{
      height: 40px;
      line-height: 40px;
      font-size:@size3;
    }
  }

  .block-recharge{
    text-align: center;
    .sub-block1{
      padding:15px 0;
      border-bottom: 1px solid @line1;
      .line1{
        padding-bottom:10px;
        font-size:@size2;
      }
    }
    .sub-block2{
      padding:15px 0;
      line-height: 25px;
      a{
        text-decoration: underline;
        color:@red;
      }
    }
  }

  .block-statistic{
    color:#fff;
    background: @yellow2;
    .block{
      width: 50%;
      float: left;
      text-align: center;
      padding:15px 0;
      i{
        display:  block;
        height: 50px;
        background-size: auto 50px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom:10px;
      }
      .i1{
        background-image: url(./image/img1.png);
      }
      .i2{
        background-image: url(./image/img2.png);
      }
      span{
        display: block;
      }
      .number{
        font-size:@size2;
      }
    }
  }

  .block-features{
    border-bottom: 1px solid @line1;
    padding:20px 0;
    .line{
      width: 33%;
      float: left;
      text-align: center;
      color:@yellow2;
      i{
        display: block;
        width: 60px;
        height: 60px;
        margin:0 auto;
        background-size:60px 60px;
        background-position: center center;
        background-repeat: no-repeat;
        margin-bottom:10px;
      }
      .i1{
        background-image: url(./image/img3.png);
      }
      .i2{
        background-image: url(./image/img4.png);
      }
      .i3{
        background-image: url(./image/img5.png);
      }
    }
  }

  .block-question{
    background: #efefef;
    padding-bottom:10px;
    .title{
      height: 50px;
      line-height: 50px;
      background: #fff;
      text-align: center;
      position: relative;
      font-size:15px;
    }
    .question{
      padding:0 10px;
      border-bottom:1px solid @line2;
      .ask{
        padding:10px 25px 10px 10px;
        position: relative;
        font-size:15px;
        .btn-ext{
          display: block;
          position: absolute;
          top:50%;
          margin-top:-10px;
          right:0;
          width: 20px;
          height: 20px;
          background: url(./image/arrow1.png) no-repeat center center;
          background-size:20px 20px;
          .transition(all 0.5s ease);
        }
        .active{
          .transform(rotate(180deg));
        }
      }
      .answer{
        line-height: 20px;
        display: none;
        background: #E4E1E1;
        padding: 10px;
        margin-bottom: 10px;
      }
    }
  }
}